import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'


export default class HorizontalProduct extends Component {
  constructor(props){
    super(props)
  }
  onProClick(i){
    let{productList,callback} =this.props
    let bl   = !productList[i].isSelected
    productList[i].isSelected=bl
    callback(productList)
  }
 
  render(){
    let {productList,style,isEdit} = this.props;
    productList = productList.map((item,i)=>{
      let pro_styles={
          "height":"100px",
          "width":"100px",
          "marginRight":"10px"
        }
      return(
        <li key={i} className={`h-main-product-item ${isEdit?'in':''}`} >
        <i className="shop-cart-checked left" style={{"margin":"38px 10px 0 0"}} >
       {/* { 
            item.isSelected?
            <img src="assets/images/icons/icon_common_select_selected@2x.png" alt="" />:
            <img src="assets/images/icons/i-choo.png" alt="" />
        }*/}
        </i>

          <div className="product"  onClick={this.props.onClick.bind(this,item)}>
           <div className="left" style={pro_styles}><img src={item.goods_image}/></div>
            <div className="info">
              <p className="name line-clamp-2">{item.goods_name}</p>
              <p className="price">$ {item.goods_price}</p>
              <p className="sales smalltxt">Sales volume：{item.goodsSalenum||0} </p>
            </div>
          </div>
          <span className={`${productList.length-1==i ? '' : 'line'}`}></span>
        </li>
      )
    })
    return(
      <ul className="main-product-group clearfix" style={style||{}} >
        {productList}
      </ul>
    )
  }
} 



export class ProductItem extends Component {
  constructor(props){
    super(props)
  }
  onProClick(i){
    let{productList,callback} =this.props
    let bl   = !productList[i].isSelected
    productList[i].isSelected=bl
    callback(productList)
  }
 
  render(){
    let {item} =this.props
    return(
        <div className="main-product-item" onClick={this.props.onClick.bind(this,item)}>
            <div className="left" ><img className='img' src={item.goods_image}/></div>
            <div className="info">
              <p className="name line-clamp-2">{item.goods_name}</p>
              <p className="price">$ {item.goods_price}</p>
              <p className="sales smalltxt">Sales volume：{item.goodsSalenum||0}</p>
            </div>
        </div>
      )
  }
} 















